<!--
 * @Description: 
 * @version: 
 * @Author: wyx
 * @Date: 2020-09-25 09:00:45
 * @LastEditDate: Do not exit
-->
<template>
  <div>
      <el-container>
        <el-header>
            <div class="left">
                <img src="@/assets/images/logo_zpl.jpg" alt="">
            </div>
            <div class="right">
                <img src="@/assets/images/login2.jpg" alt="">
            </div>
        </el-header>
        <el-main>
            <div class="main-body">
                <div class="step">
                <el-steps :active="active" finish-status="success">
                    <el-step :title="item.title" @click.native ="stepClick(item.index)" v-for="item in stepData" :key ="item.index"></el-step>
                </el-steps>
            </div>

            <el-form :model="findForm" :rules="rules" ref="ruleForm" label-width="120px" class="demo-ruleForm">
            
            <div class="active0" v-show="active === 0" id="ac">
                <el-form-item label="手机号 : " prop="phone" label-width="120px" style="margin-left:-40px;">
                <el-input
                    placeholder="请输入手机号"
                    prefix-icon="el-icon-search"
                    v-model="findForm.phone"
                    >
                </el-input>
                </el-form-item>
            </div>
            <div class="active1" v-show="active === 1" id="ac">
                <el-form-item label="忘记密码问题:" prop="question">
                <el-select placeholder="请选择" v-model="findForm.question">
                                <el-option
                                v-for="item in options"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                                </el-option>
                            </el-select>
                </el-form-item>
                <el-form-item label="忘记密码答案:" prop="answer">
                            <el-input v-model="findForm.answer"></el-input>
                        </el-form-item>
            </div>
            <div class="active2" v-show="active === 2" id="ac">
                <el-form-item label="输入密码:" prop="pass">
                    <el-input type="password" v-model="findForm.pass" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="确认密码:" prop="checkPass">
                    <el-input type="password" v-model="findForm.checkPass" autocomplete="off"></el-input>
                </el-form-item>
            </div>

            <div class="active2" v-show="active === 3" id="ac">
                <el-progress type="circle" :percentage="100" status="success" style="margin-left:105px;margin-top:-40px"></el-progress>
                <!-- <p style="margin-left:100px;">{{count}}秒后跳转至登录界面</p> -->
            </div>

            </el-form>

            <button class="btn" @click="nextClick()" onmouseover="this.style.backgroundColor='pink';" onmouseout="this.style.backgroundColor='';" >{{next}}</button>

            </div>
            
        </el-main>
        <el-footer>© MAKE-UP ART COSMETICS. ALL WORLDWIDE RIGHTS RESERVED.</el-footer>
    </el-container>
  </div>
</template>

<script>
import {forget,update} from "@/api/member.js"

export default {
    data(){
        var validatePass = (rule, value, callback) => {
            if (value === '') {
            callback(new Error('请输入密码'));
            } else {
            if (this.findForm.checkPass !== '') {
                this.$refs.ruleForm.validateField('checkPass');
            }
            callback();
            }
        };
        var validatePass2 = (rule, value, callback) => {
            if (value === '') {
            callback(new Error('请再次输入密码'));
            } else if (value !== this.findForm.pass) {
            callback(new Error('两次输入密码不一致!'));
            } else {
            callback();
            }
        };
        return{
            active:0,
            next:"下一步",
            stepData: [
                {index: 0, title: '手机号'},
                {index: 1, title: '验证'},
                {index: 2, title: '重置密码'},
                {index: 3, title: '完成'}
            ],
            options: [{
                value: '你最喜欢的口红品牌',
                label: '你最喜欢的口红品牌'
                }, {
                value: '你最喜欢的电影',
                label: '你最喜欢的电影'
                }, {
                value: '你最喜欢的动漫',
                label: '你最喜欢的动漫'
                }, {
                value: '你的小学名字',
                label: '你的小学名字'
                },],
            findForm:{},
            updateForm:{},
            num:0,
            count:'',
            question:"",
            answer:"",
            id:"",
            rules: {
                pass: [
                    { validator: validatePass, trigger: 'blur' }
                ],
                checkPass: [
                    { validator: validatePass2, trigger: 'blur' }
                ],
            },

        }
    },
    methods:{
        clickJump(){
            const timejump = 1;
            if(!this.timer){
                this.count = timejump ;
                this.show = false;
                this.timer = setInterval(()=>{
                if(this.count > 0 && this.count <= timejump ){
                    this.count--;
                }else{
                    this.show = true;
                    clearInterval(this.timer);
                    this.timer = null;
                    //跳转的页面写在此处
                    this.$router.push({path: '/login'});
                }
            },100)
            }
        },
        stepClick (val) {
            this.active = val;
        },
        nextClick () {
            this.num++;
            if(this.num==1){
                forget(this.findForm.phone).then(res=>{
                    if(res.data.code==="0000"){
                        this.$message.success("该会员存在!");
                        this.active++;
                        this.question=res.data.data.question;
                        this.answer=res.data.data.answer;
                        this.id=res.data.data.id;
                    }
                    else{
                        this.$message.error("不存在该会员!");
                        this.num=0;
                    }
                })
            }
            else if(this.num==2){
                            console.log(this.findForm)
                                if(this.findForm.question==this.question&&this.findForm.answer==this.answer){
                                    this.active++;
                                    this.$message.success("验证成功!");
                                }
                                else{
                                    this.$message.error("验证失败!");
                                    this.num=1;
                                }
                        }
            else if(this.num==3){
                this.updateForm.id=this.id
                this.updateForm.password=this.findForm.pass;
                update(this.updateForm).then(res=>{
                    if(res.data.code==="0000"){
                        this.active++;
                        this.next="前往登录界面";
                        this.$message.success("重置密码成功!");
                    }
                    else{
                        this.$message.error("重置密码失败!");
                        this.num=2;
                    }
                })
            }
            else if(this.num==3&&this.next=="前往登录界面"){
                this.clickJump();
            }
            else if(this.num==4&&this.next=="前往登录界面"){
                this.$router.push("/login");
                this.num=0;
            }
        },
    }
}
</script>

<style scoped>
.el-header, .el-footer {
    /* background-color: #B3C0D1; */
    color: #333;
    text-align: center;
    line-height: 60px;
}
.el-main {
    background-color: #e7d0dabd;
    color: #333;
    /* text-align: center; */
    /* line-height: 560px; */
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
}
.left{
    display: flex;
    justify-content: flex-start;
    margin-left: 100px;
}
.right{
    display: flex;
    justify-content: flex-end;
    margin-right: 10px;
    margin-top: -55px;
}
.left img{
    width: 200px;
    height: 60px;
}
.main-body{
    height: 550px;
}
.step{
    width: 800px;
}
#ac{
    width: 300px;
    height: 140px;
    margin-top: 50px;
    margin-left: 220px;
}
.btn{
    width: 300px;
    height: 40px;
    margin-left: 240px;
    background-color: rgb(168, 165, 165);
    color: #000;
}
</style>